<template>
	<view>

		<view style="margin: 0 20rpx;">
			<view v-for="(item,index) in collectList" :key="index" @click="cardClick(item.id,item.collectType)"
				style="border-radius: 20rpx;display: flex;justify-content: center;margin-bottom: 20rpx;padding: 14rpx;background-color: #fff;">
				<view style="width: 260rpx;height: 190rpx;border-radius: 20rpx;overflow: hidden;">
					<image style="width: 100%;height: 100%;" :src="imgOne(item.pic,item.collectType)" mode="aspectFill">
					</image>
				</view>
				<view style="width: 100%;margin-left: 20rpx;display: flex;flex-direction: column;">
					<view style="font-size: 28rpx;margin-bottom: 12rpx;">
						{{item.title}}
					</view>
					<view
						style="margin-bottom: 12rpx;font-size: 26rpx;color: #909399;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;">
						{{item.collectType == '社会资讯' ? delTag(item.description) : item.description}}
					</view>
					<view style="align-self: flex-start;margin-bottom: 12rpx;">
						<text v-if="item.collectType == '求职'" class="etcString"
							style="background-color: #20C3FE;">求职</text>
						<text v-if="item.collectType == '招聘'" class="etcString"
							style="background-color: #F9AE3D;">招聘</text>
						<text v-if="item.collectType == '房屋'" class="etcString"
							style="background-color: #5AC725;">房屋</text>
						<text v-if="item.collectType == '推荐店铺'" class="etcString"
							style="background-color: #FF226B;">推荐店铺</text>
						<text v-if="item.collectType == '社会资讯'" class="etcString"
							style="background-color: #DD27DE;">社会资讯</text>
						<text v-if="item.collectType == '周末游'" class="etcString"
							style="background-color: #B1CA79;">周末游</text>
					</view>
					<view style="display: flex;justify-content: flex-end;">
						<view style="margin-left: 10rpx;font-size: 22rpx;color: #909399;">{{item.createTime}}</view>
						<view
							style="margin-left: 10rpx;display: flex;justify-content: start;font-size: 22rpx;color: #909399;">
							<u-icon color="#20C3FE" name="eye"></u-icon>
							<text>{{item.lookNum}}</text>
						</view>
						<view
							style="margin-left: 10rpx;display: flex;justify-content: start;font-size: 22rpx;color: #909399;">
							<u-icon name="star" color="#ffaa00"></u-icon>
							<text>{{item.collect}}</text>
						</view>
						<view @click.stop="delToast()"
							style="margin-left: 10rpx;display: flex;justify-content: start;font-size: 22rpx;color: #909399;">
							<u-icon color="#c1c1c1" name="trash"></u-icon>
							<text>删除</text>
						</view>
					</view>
				</view>
			</view>
		</view>


		<u-modal :show="show" :title="title" :content='content' @confirm="tureDel" @cancel="cancelDel"
			:asyncClose="true" showCancelButton></u-modal>
	</view>
</template>

<script>
	import {
		getCollectList
	} from '../../config/api.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				collectList: [],
				length: '',
				flag: false,
				title: '',
				content: '',
				show: false,
				delIndex: ''
			}
		},
		computed: {
			...mapGetters(['getUserinfo', 'getBaseUrl'])
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				getCollectList({
					createBy: this.getUserinfo.id
				}).then(res => {
					this.collectList = res.data.data.map(item => {
						return {
							id: item.id,
							title: item.title,
							address: item.address,
							description: item.description,
							collectType: item.collectType,
							pic: item.pic,
							createTime: item.createTime,
							lookNum: item.lookNum,
							collect: item.collect
						}
					})
				})
			},
			// 删除弹窗
			delToast(id, title, index) {
				this.title = title
				this.delIndex = index
				this.content = '确定删除此条信息吗'
				this.show = true
				console.log(this.delIndex);
			},
			tureDel() {
				this.collectList.splice(this.delIndex, 1);
				setTimeout(() => {
					this.show = false;
				}, 3000)
			},
			cancelDel() {
				this.show = false
			},
			// 取卡片对象的第一张图片
			imgOne(pic, tags) {

				if (pic == null || pic == '') {
					console.log('null', pic, tags)
					if (tags == '求职') {
						return '/static/standbyLogo/zhao_logo.jpg'
					} else
					if (tags == '招聘') {
						return '/static/standbyLogo/pin_logo.png'
					} else
					if (tags == '房屋') {
						return '/static/standbyLogo/house_logo.png'
					} else
					if (tags == '推荐店铺') {
						return '/static/standbyLogo/store_logo.png'
					} else
					if (tags == '社会资讯') {
						return '/static/standbyLogo/zixun_logo.png'
					} else
					if (tags == '周末游') {
						return '/static/standbyLogo/week_logo.png'
					}

				} else {
					console.log('hava', pic, tags)
					let src = pic.split(",")[0];
					return this.getBaseUrl + src
				}

			},

			cardClick(id, tags) {
				if (tags == '求职') {
					uni.navigateTo({
						url: `/pages/recruit/jobHuntDetail?id=${id}`
					})
				} else if (tags == '招聘') {
					uni.navigateTo({
						url: `/pages/recruit/recruitDetail?id=${id}`
					})
				} else if (tags == '房屋') {
					uni.navigateTo({
						url: `/pages/house/house?id=${id}`
					})
				} else if (tags == '推荐店铺') {
					uni.navigateTo({
						url: `/pages/shop/shopDetail?id=${id}`
					})
				} else if (tags == '社会资讯') {
					uni.navigateTo({
						url: `/pages/society/society?id=${id}`
					})
				} else if (tags == '周末游') {
					uni.navigateTo({
						url: `/pages/weekendTour/weekendTour?id=${id}`
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.etcString {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 22rpx;
		border-radius: 10rpx;
		line-height: 40rpx;
		padding: 8rpx;
		color: #fff;
	}
</style>